<%@page import="org.springframework.security.core.context.SecurityContextImpl"%>
<%@ page contentType="text/html;charset=UTF-8" language="java"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="/jstl/fn" prefix="fn"%>
<!DOCTYPE html>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
	
	SecurityContextImpl securityContextImpl = (SecurityContextImpl)request.getSession().getAttribute("SPRING_SECURITY_CONTEXT");
%>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
	content="width=device-width,initial-scale=1 user-scalable=0">
<link rel="stylesheet" href="<%=basePath%>assets/css/public.css">
<link rel="stylesheet"
	href="<%=basePath%>assets/css/idangerous.swiper.css">

<title>商品详情</title>
<link rel="stylesheet" href="<%=basePath%>assets/css/page.css">
<link rel="stylesheet"
	href="<%=basePath%>assets/font-awesome-4.7.0/css/font-awesome.min.css">
<script src="<%=basePath%>/assets/js/jquery-1.8.3.min.js"></script>
<script src="<%=basePath%>assets/js/fontSize.js"></script>
<link href="<%=basePath%>/assets/layer/mobile/need/layer.css"
	rel="stylesheet" type="text/css">
<script src="<%=basePath%>/assets/layer/mobile/layer.js"></script>
<link rel="stylesheet" href="<%=basePath%>/assets/imgTools/helmet.css">
<style>
.fanhui {
	font-size: 0.5rem;
	line-height: 0.8rem;
	width: 13%;
	color: #fff;
	text-align: center;
}

.header_gengduo {
	height: 0.8rem;
	line-height: 0.8rem;
	padding: 4%;
}

.shangpinxinxi {
	background: #fff
}

.shangjiaxinxi {
	border-bottom: 1px solid #f1f1f1;
	padding-bottom: 0.2rem;
	background: #fff
}

.shangjiaxinxi img {
	width: 12%;
	padding: 0 4%;
	border-radius: 50%
}

.shangjiaxinxi_cont {
	width: 80%
}

.shangjiaxinxi_cont h4 {
	font-size: 0.24rem;
	font-weight: bold;
	line-height: 0.5rem
}

.shangjiaxinxi_cont p {
	font-size: 0.20rem;
	line-height: 0.4rem;
}

.maijiamingcheng {
	text-indent: 0.3rem
}

.maijiadianpujieshao {
	text-indent: 0.3rem
}

.shangjiaxinxi {
	padding-top: 0.3rem
}

.shangpinjieshao {
	font-size: 0.22rem;
	line-height: 0.3rem;
	padding: 0.2rem;
	background: #fff;
	border-bottom: 5px solid #f1f1f1;
}

.shangpintupian {
	width: 80%;
	padding: 0.3rem 10%
}

.shangpintupian img {
	width: 100%
}

.shangpinjiage {
	border-bottom: 1px solid #f1f1f1;
	background: #fff
}

.shangpinjiage>p {
	font-size: 0.28rem;
	line-height: 0.4rem;
	padding: 0.1rem 0.3rem
}
/*         .shangpinjiage>div>span{font-size: 0.35rem;line-height: 0.6rem;padding:  0 0.3rem} */
.shangpinjiage>div>.goodsPrice i {
	font-size: 0.35rem;
	line-height: 0.6rem;
	padding: 0 0.3rem 0 0
}

.shangpinjiage>div>.goodsSales {
	font-size: 0.2rem;
	line-height: 0.6rem;
	padding: 0 0.3rem
}

.guige {
	font-size: 0.20rem;
	color: #ccc;
	text-indent: 0.3rem;
	height: 0.8rem;
	line-height: 0.8rem;
	border-top: 1px solid #ccc
}

.shangpinjieshao h3, .pinglun h3 {
	font-size: 0.3rem;
	font-weight: bold;
	height: 0.5rem;
	line-height: 0.5rem;
}

.pinglun h3 {
	padding: 0.2rem;
	background: #fff;
}

.shangpinjieshao p {
	font-size: 0.26rem;
	line-height: 0.4rem;
}
</style>

<script>
        $(function () {
            $('.shangjiaxinxi>img').height($('.shangjiaxinxi>img').width())
        })
    </script>

</head>
<body>
	<style>
body {
	background: #f8f8f8;
	padding-bottom: 0.8rem;
	padding-top: 0.8rem;
}

.navPOS {
	height: 0.8rem;
}

.navPOS span {
	width: 20%;
	height: 0.8rem;
	line-height: 0.8rem;
	font-size: 0.2rem
}

.navPOS span img {
	width: 30%;
	margin: 0.2rem 0.05rem 0.2rem 0.2rem;
	float: left
}

.xiangyao {
	width: 25%;
	height: 0.8rem;
	text-align: center;
	line-height: 0.8rem;
	color: #fff;
	font-size: 0.24rem;
}

.xiangyao.jiarugouwuche {
	background: #FF3F25
}

.xiangyao.goumai {
	background: red
}

.gouwuche_icon {
	position: relative
}

.gwcNumber {
	background: red;
	width: 0.3rem;
	height: 0.25rem;
	position: absolute;
	right: 43%;
	top: 0.07rem;
	border-radius: 50%;
	color: #fff;
	line-height: 0.30rem;
	font-size: 0.1rem;
	text-align: center
}

.body_bj {
	background: rgba(0, 0, 0, 0.3);
	width: 100%;
	height: 100%;
	position: fixed;
	left: 0;
	top: 0;
	display: none;
	z-index: 10;
}

.guanbi {
	position: absolute;
	right: 0.2rem;
	top: 0.2rem;
	line-height:0.2rem;
	font-size: 0.2rem;
}

.gouwuche_box {
	width: 100%;
	position: fixed;
	left: 0;
	bottom: -1.5rem;
	background: #fff;
	min-height: 3.5rem;
	padding-bottom: 1.5rem;
	z-index: 11;
}

.shangpinxiangqing {
	width: 100%;
	border-bottom: 1px solid #f1f1f1;
	padding-bottom: 0.1rem
}

.shangpinxiangqing img {
	width: 30%;
	display: block;
	border: 5px solid #fff;
	margin: -5% 0 0 2%;
}

.shangpinxiangqing_text {
	width: 50%;
	padding-left: 0.2rem;
	padding-top: 0.1rem;
}

.shangpinxiangqing_text>p {
	font-size: 0.2rem;
	line-height: 0.36rem;
}

.shangpinxiangqing_text>p.jiage {
	color: red;
	line-height: 0.4rem;
	font-weight: bold;
	font-size: 0.26rem;
}

.shangpinfenlei {
	width: 96%;
	padding: 0 2%;
	padding-bottom: 0.1rem
}

.shangpinfenlei p {
	font-size: 0.3rem;
	line-height: 0.5rem;
	text-indent: 0.1rem
}

.shangpinfenlei ul li {
	float: left;
	margin: 0.1rem
}

.shangpinfenlei ul li a {
	padding: 0 0.2rem;
	height: 0.42rem;
	line-height: 0.42rem;
	background: #e1e1e1;
	border-radius: 3px;
	display: block;
}

.shangpinfenlei ul li a.active {
	padding: 0 0.2rem;
	height: 0.42rem;
	line-height: 0.42rem;
	background: #e1e1e1;
	border-radius: 3px;
	display: block;
	color: #ccc;
	background: #FF3F25;
}

.queding_but {
	width: 100%;
	background: red;
	color: #fff;
	font-size: 0.3rem;
	height: 0.8rem;
	line-height: 0.8rem;
	text-align: center;
	display: block;
	border-radius: 5px;
	position: absolute;
	left: 0;
	bottom: 0
}

.goumaishuliang {
	border-bottom: 1px solid #f1f1f1;
	position: absolute;
	left: 0;
	bottom: 1rem;
	width: 100%;
	border-top: 1px solid #f1f1f1;
}

.goumaishuliang p {
	width: 40%;
	float: left;
	padding-left: 10%;
	height: 0.6rem;
	line-height: 0.6rem;
	font-size: 0.24rem
}

.goumaishuliang p a {
	width: 20%;
	height: 0.6rem;
	line-height: 0.6rem;
	display: block;
	float: left;
	text-align: center;
	border-left: 1px solid #f1f1f1;
	border-right: 1px solid #f1f1f1;
	text-indent: 0;
}

.goumaishuliang p input {
	width: 40%;
	height: 0.6rem;
	line-height: 0.6rem;
	display: block;
	float: left;
	text-align: center
}
</style>
	<script>
    $(function () {
    	getIfShouCang();
    	getShopCardCount();
    	var goodsStockNum = '${goods.goodsStock}';
        $('.gouwuche_box').css('bottom',-$('.gouwuche_box').height()-150);

        $('#jiarugouwuche_btn').click(function () {
            $('.body_bj').fadeIn();
            $(".gouwuche_box").animate({bottom:0},100);
        });
      	//商品有规格的情况下加入购物车
        $('#queding_but').click(function () {
        	var joinShopCardCount = $("#joinShopCardCount").val();
        	var goodsId = '${goods.goodsId}';
        	var strTj = "";
        	//判断商品规格（如果不选择就不给他加购物车）
        	$('.shangpinfenlei> .clearFirx > li .active').each(function() {
        		strTj += $(this).html() + ","
			})
        	if(strTj!=null&&strTj!=''){
        		$.ajax({
        	    	url: $("#basePath").val()+"app/getShopCardGoodsCount",
        	        timeout: 300000,
        	        type: 'post',
        	        data: {"goodsId":goodsId},
        	        dataType: 'json',
        	        success: function (data) {
        	        	var goodsNumtotal = 0;
        	        	if(data.shoppingCardGoods != null &&data.shoppingCardGoods!=''&& typeof(data.shoppingCardGoods) != "undefined"){
        	        		var goodsNumtotal =data.shoppingCardGoods+parseInt(joinShopCardCount);
        	        	}else{
        	        		goodsNumtotal = 1;
        	        	}
        	        	if(goodsNumtotal>goodsStockNum){
        	        		layer.open({
    	        			    content: '库存不足'
    	        			    ,skin: 'msg'
    	        			    ,time: 2 //2秒后自动关闭
    	        			  });
        	        	}else{
        	             	var goodsprice = '${goods.goodsPrice}';
        	             	var goodstotal = ((joinShopCardCount * goodsprice).toFixed(2));
        	            	$.ajax({
        	                	url: $("#basePath").val()+"app/updAndAddShoppingCard",
        	                    timeout: 300000,
        	                    type: 'post',
        	                    data: {"goodsId":goodsId,"orderCount":joinShopCardCount,"orderPrice":goodstotal,"unitPrice":goodsprice},
        	                    dataType: 'json',
        	                    success: function (data) {
        	                    	if(data==1){
        	                    		layer.open({
        	    	        			    content: '添加成功'
        	    	        			    ,skin: 'msg'
        	    	        			    ,time: 2 //2秒后自动关闭
        	    	        			  });
        	                    		var shopCardCount = parseInt($("#shopCardCount").html());
        	                    		var totalCount =(parseInt(shopCardCount)+parseInt(joinShopCardCount));
        	                    		if(totalCount>99){
        	            	        		$("#shopCardCount").html("99+");
        	            	        	}else{
        	            	        		$("#shopCardCount").html(totalCount);
        	            	        	}
        	                    	}else if(data==2){
        	                    		layer.open({
        	    	        			    content: '添加成功'
        	    	        			    ,skin: 'msg'
        	    	        			    ,time: 2 //2秒后自动关闭
        	    	        			  });
        	                    		var shopCardCount = parseInt($("#shopCardCount").html());
        	                    		var totalCount =(parseInt(shopCardCount)+parseInt(joinShopCardCount));
        	                    		if(totalCount>99){
        	            	        		$("#shopCardCount").html("99+");
        	            	        	}else{
        	            	        		$("#shopCardCount").html(totalCount);
        	            	        	}
        	                    	}else{
        	                    		layer.open({
        	    	        			    content: '加入购物车失败,您先登录~'
        	    	        			    ,skin: 'msg'
        	    	        			    ,time: 2 //2秒后自动关闭
        	    	        			  });
        	                    	}
        	                    },error:function (){
        	                    }
        	            	});
        	            	 $('.body_bj').fadeOut();
        	                 $(".gouwuche_box").animate({bottom:-$('.gouwuche_box').height()-150},100);
        	        	}
        	        },error:function (){
        	        	layer.open({
	        			    content: '服务器出现了点异常,请稍后再尝试~'
	        			    ,skin: 'msg'
	        			    ,time: 2 //2秒后自动关闭
	        			  });
        	        }
        		});
        	}else{
        		layer.open({
    			    content: '请选择商品规格~'
    			    ,skin: 'msg'
    			    ,time: 2 //2秒后自动关闭
    			  });
        	}
        });
        //商品没有规格的情况下加入购物车
        $('#jiarugouwuche_btn2').click(function () {
        	var joinShopCardCount = 1;
        	var goodsId = '${goods.goodsId}';
        	$.ajax({
    	    	url: $("#basePath").val()+"app/getShopCardGoodsCount",
    	        timeout: 300000,
    	        type: 'post',
    	        data: {"goodsId":goodsId},
    	        dataType: 'json',
    	        success: function (data) {
    	        	var goodsNumtotal = 0;
    	        	if(data.shoppingCardGoods != null &&data.shoppingCardGoods!=''&& typeof(data.shoppingCardGoods) != "undefined"){
    	        		goodsNumtotal =data.shoppingCardGoods+parseInt(joinShopCardCount);
    	        	}else{
    	        		goodsNumtotal = 1;
    	        	}
    	        	var goodsStockNum = '${goods.goodsStock}';
    	        	if(goodsNumtotal>goodsStockNum){
    	        		layer.open({
	        			    content: '添加购物车数量，已超库存了亲～'
	        			    ,skin: 'msg'
	        			    ,time: 2 //2秒后自动关闭
	        			  });
    	        	}else if(goodsNumtotal==0||goodsNumtotal<=goodsStockNum){
    	             	var goodsprice = '${goods.goodsPrice}';
    	             	var goodstotal = ((joinShopCardCount * goodsprice).toFixed(2));
    	            	$.ajax({
    	                	url: $("#basePath").val()+"app/updAndAddShoppingCard",
    	                    timeout: 300000,
    	                    type: 'post',
    	                    data: {"goodsId":goodsId,"orderCount":joinShopCardCount,"orderPrice":goodstotal,"unitPrice":goodsprice},
    	                    dataType: 'json',
    	                    success: function (data) {
    	                    	if(data==1){
    	                    		layer.open({
    	    	        			    content: '添加成功，请在购物车等亲～'
    	    	        			    ,skin: 'msg'
    	    	        			    ,time: 2 //2秒后自动关闭
    	    	        			  });
    	                    		var shopCardCount = parseInt($("#shopCardCount").html());
    	                    		var totalCount =(parseInt(shopCardCount)+parseInt(joinShopCardCount));
    	                    		if(totalCount>99){
    	            	        		$("#shopCardCount").html("99+");
    	            	        	}else{
    	            	        		$("#shopCardCount").html(totalCount);
    	            	        	}
    	                    	}else if(data==2){
    	                    		layer.open({
    	    	        			    content: '添加成功，请在购物车等亲～'
    	    	        			    ,skin: 'msg'
    	    	        			    ,time: 2 //2秒后自动关闭
    	    	        			  });
    	                    		var shopCardCount = parseInt($("#shopCardCount").html());
    	                    		var totalCount =(parseInt(shopCardCount)+parseInt(joinShopCardCount));
    	                    		if(totalCount>99){
    	            	        		$("#shopCardCount").html("99+");
    	            	        	}else{
    	            	        		$("#shopCardCount").html(totalCount);
    	            	        	}
    	                    	}else{
    	                    		layer.open({
    	    	        			    content: '加入购物车失败,您先登录~'
    	    	        			    ,skin: 'msg'
    	    	        			    ,time: 2 //2秒后自动关闭
    	    	        			  });
    	                    	}
    	                    },error:function (){
    	                    }
    	            	});
    	        	}
    	        },error:function (){
    	        }
    		});
        });
        
        
        $('.guanbi').click(function () {
            $('.body_bj').fadeOut();
            $(".gouwuche_box").animate({bottom:-$('.gouwuche_box').height()-150},100);
        })
        $('.gljian').click(function () {
            if($('.glinput').val() == 1){
                $('.glinput').val(1)
            }else {
                $('.glinput').val($('.glinput').val()-1);
            }
        })
        $('.gljia').click(function () {
            var maxShuliang = $('.kucun>span').html();
            if($('.glinput').val() == parseInt(maxShuliang)){
                $('.glinput').val(maxShuliang);
                layer.open({
    			    content: '宝贝最多就这些了呢亲～'
    			    ,skin: 'msg'
    			    ,time: 2 //2秒后自动关闭
    			  });
            }else if($('.glinput').val() > parseInt(maxShuliang)){
            	layer.open({
    			    content: '宝贝最多就这些了呢亲～'
    			    ,skin: 'msg'
    			    ,time: 2 //2秒后自动关闭
    			  });
            }else {
                $('.glinput').val(parseInt($('.glinput').val())+1);
            }

        })
        
        $('#shoucang').click(function () {
        	
        	if("<%=securityContextImpl%>" == "null"){
	    		window.location.href = "<%=basePath%>app/appLogin2";
	    		return;
	    	}
        	
        	if($("#shoucang").find('i').html() == "收藏"){
        		$(this).find('img').attr('src','<%=basePath%>assets/images/sc2.png');
                $(this).find('i').html('已收藏');
                joinSCAndCancelSC();
        	}else{
        		$(this).find('img').attr('src','<%=basePath%>assets/images/sc.png');
                $(this).find('i').html('收藏');
                joinSCAndCancelSC();
        	}
        })
        
        
        
        //判断是否有被收藏
        function getIfShouCang(){
        	var isLogin = 0;
        	$.ajax({
    	    	url: "<%=basePath%>app/getFavorites",
    	        type: 'post',
    	        data: {"targetId":"${goods.goodsId}","attentionType":0},
    	        dataType: 'json',
    	        async: false,
    	        success: function (data) {
    	        	if(typeof(data.state) == "undefined"){
    	        		isLogin = 0;
    	        	}else{
    	        		isLogin = 1;
    	        		var obj = data.favoritesGoodsList;
    	        		if(obj.length > 0){
    	        			$("#shoucang").find('img').attr('src','<%=basePath%>assets/images/sc2.png');
    	    	            $("#shoucang").find('i').html('已收藏');
    	        		}else{
    	        			 $("#shoucang").find('img').attr('src','<%=basePath%>assets/images/sc.png');
    	    	             $("#shoucang").find('i').html('收藏');
    	        		}
    	        	}
    	        },error:function (){
    	        }
    		});
        	
// 	   	 	var favoritesInfo = '${favoritesInfo}';
// 	        if(favoritesInfo!=null && favoritesInfo!=''){
<%-- 	        	$("#shoucang").find('img').attr('src','<%=basePath%>assets/images/sc2.png'); --%>
// 	            $("#shoucang").find('i').html('已收藏');
// 	        }else{
<%-- 	        	 $("#shoucang").find('img').attr('src','<%=basePath%>assets/images/sc.png'); --%>
// 	             $("#shoucang").find('i').html('收藏');
// 	        }
        };
        
        //加入收藏与取消收藏
        function joinSCAndCancelSC(){
        	var targetId = '${goods.goodsId}';
        	var favoritesId = '${favoritesInfo.favoritesId}';
        	var favoriteType = 0;
        	$.ajax({
    	    	url: $("#basePath").val()+"app/focusAndCancelFocus",
    	        timeout: 300000,
    	        type: 'post',
    	        data: {"targetId":targetId,"favoritesId":favoritesId,"favoriteType":favoriteType},
    	        dataType: 'json',
    	        success: function (data) {
    	        	if(data==1){
    	        		  layer.open({
    	        			    content: '取消收藏宝贝成功'
    	        			    ,skin: 'msg'
    	        			    ,time: 2 //2秒后自动关闭
    	        			  });
    	        	}else if(data==2){
    	        		  layer.open({
    	        			    content: '收藏了一个宝贝'
    	        			    ,skin: 'msg'
    	        			    ,time: 2 //2秒后自动关闭
    	        			  });
    	        	}else{
    	        		
    	        	}
    	        },error:function (){
    	        }
    		});
        };
        
        //获取购物车数量
        function getShopCardCount(){
        	$.ajax({
    	    	url: $("#basePath").val()+"app/getShopCardCount",
    	        timeout: 300000,
    	        type: 'post',
    	        dataType: 'json',
    	        success: function (data) {
    	        	if(data>99){
    	        		$("#shopCardCount").html("99+");
    	        	}else if(data==0){
    	        		$("#shopCardCount").html(0);
    	        	}else{
    	        		$("#shopCardCount").html(data);
    	        	}
    	        },error:function (){
    	        }
    		});
        };
        
      	//立即购买
       	$('#nowShopping').click(function () {
       		if(goodsStockNum > 0){
	       		var goodsId = '${goods.goodsId}';
	       		var shopcarnum = $("#joinShopCardCount").val();
	       		window.location.href=$("#basePath").val()+"app/toNowShopping?goodsId="+goodsId+"&shopcarnum="+shopcarnum;
       		}else{
       			layer.open({
    			    content: '库存不足'
    			    ,skin: 'msg'
    			    ,time: 2 //2秒后自动关闭
   			  	});
       		}
       });
     	//跳转购物车
       $('#toShopping,#shopCardCount').click(function () {
    	   window.location.href="<%=basePath%>app/getShoppingCardList";
       });
     	

     	
       $('.shangpinfenlei ul').find('li').each(function () {
    	   
           $(this).click(function () {
        	   if($(this).find('a').hasClass('active')){

                  
                   $(this).find('a').removeClass('active')

        	   }else{
        	
        		   
                   $(this).siblings().find('a').removeClass('active');
                   $(this).find('a').addClass('active')
       		   
        	   }
           })
       })
       
 
    });
</script>
	<input type="hidden" value="<%=basePath%>" id="basePath">
<%-- 	<div class="navPOS clearFirx">
		<c:if test="${goods.goodsSize != null && goods.goodsSize !=''}">
			<a href="javascript:;" class="float_r xiangyao goumai"
				id="nowShopping">立即购买</a>
			<a href="javascript:;" class="float_r xiangyao jiarugouwuche"
				id="jiarugouwuche_btn">加入购物车</a>
		</c:if>
		<c:if test="${goods.goodsSize == null || goods.goodsSize ==''}">
			<a href="javascript:;" class="float_r xiangyao goumai"
				id="nowShopping">立即购买</a>
			<a href="javascript:;" class="float_r xiangyao jiarugouwuche"
				id="jiarugouwuche_btn2">加入购物车</a>
		</c:if>
		<span href="javascript:;" class="float_l shoucang" id="shoucang"><img
			src="<%=basePath%>assets/images/sc.png" alt=""><i>收藏</i></span> <span
			href="javascript:;" class="float_r gouwuche_icon"><img
			src="<%=basePath%>assets/images/gwc.png" alt="" id="toShopping">
		<div class="gwcNumber" id="shopCardCount">0</div></span>
	</div>
	<div class="body_bj"></div>
	<div class="gouwuche_box">
		<div class="guanbi">
			<i class="fa fa-close"></i>
		</div>
		<div class="shangpinxiangqing clearFirx">
			<img src="<%=basePath%>/app/getGoodsPhotoByName?goodsImage=${goods.goodsThums}" alt="" class="float_l" style="width: 2.1rem;height: 2.1rem;">
			<div class="float_l shangpinxiangqing_text">
				<p class="jiage">
					￥&nbsp;&nbsp;<span>${goods.goodsPrice}</span>元
				</p>
				<p class="kucun">
					库存<span>${goods.goodsStock}</span>件
				</p>
				<p class="tishi">请选择&nbsp;&nbsp;颜色分类</p>
			</div>
		</div>
		
		<div class="shangpinfenlei">
			<p>颜色分类</p>
			<ul class="clearFirx">
				<c:set value="${ fn:split(goods.goodsSize, ',') }"
					var="goodsSizeList" />
				<c:forEach items="${goodsSizeList}" var="size" varStatus="status">

					<li><a href="javascript:;">${size}</a></li>

				</c:forEach>

			</ul>
		</div>
		
		<div class="goumaishuliang clearFirx">
			<p>购买数量</p>
			<p>
				<a href="javascript:;" class="gljian">-</a><input type="text"
					value="1" class="glinput" id="joinShopCardCount"
					readonly="readonly"><a href="javascript:;" class="gljia">+</a>
			</p>
		</div>
		<a href="javascript:;" class="queding_but" id="queding_but">确定</a>
	</div> --%>

	<!-- 头部开始  -->
	<div class="header">
		<div class='header_top'>
			<a class=returnInfo href="#" onclick="javascript:history.go(-1);"><i class="fa fa-angle-left"></i></a>
			<div class="header_top">商品详情</div>
		</div>
	</div>
	<style>
.swiper-container {
	height: 3rem;
	width: 100%;
}

.swiper-slide img {
	width: 100%;
	height: 100%;
	display: block
}

.device {
	width: 100%;
	height: 3rem;
	/*padding: 30px 40px;*/
	/*border-radius: 20px;*/
	/*background: #111;*/
	/*border: 3px solid white;*/
	/*margin: 5px auto;*/
	position: relative;
	/*box-shadow: 0px 0px 5px #000;*/
}

.device .arrow-left {
	background: url(img/arrows.png) no-repeat left top;
	position: absolute;
	left: 10px;
	top: 50%;
	margin-top: -15px;
	width: 17px;
	height: 30px;
}

.device .arrow-right {
	background: url(img/arrows.png) no-repeat left bottom;
	position: absolute;
	right: 10px;
	top: 50%;
	margin-top: -15px;
	width: 17px;
	height: 30px;
}

.swiper-container {
	height: 3rem;
	width: 100%;
}

.swiper-slide img {
	width: 100%;
	height: 100%;
	display: block
}

.pagination {
	position: absolute;
	left: 0;
	text-align: center;
	bottom: 0;
	width: 100%;
	z-index: 1000;
}

.swiper-pagination-switch {
	display: inline-block;
	width: 10px;
	height: 10px;
	border-radius: 10px;
	background: #999;
	box-shadow: 0px 1px 2px #555 inset;
	margin: 0 3px;
	cursor: pointer;
}
/* .pinglun{border-top:1px solid #ccc} */
.pinglun ul li {
	width: 98%;
	padding: 0 1%;
	background: #fff;
	padding-bottom: 0.1rem;
	border-bottom: 0.01rem solid #f1f1f1
}

.pinglun ul li>.img, .pinglun ul li>.img2 {
	width: 0.6rem;
	height: 0.6rem;
	overflow: hidden;
	border-radius: 10%;
	margin: 0.1rem;
}

.pinglun ul li>.img img, .pinglun ul li>.img2 img {
	width: 100%;
	display: block;
}

.pinglun ul li>.pltext {
	width: 81%;
}

.pinglun ul li>.pltext .plrenxx {
	font-size: 0.24rem;
	line-height: 0.4rem;
	padding-top: 0.06rem
}

.pinglun ul li>.pltext .plxx {
	font-size: 0.22rem;
	line-height: 0.3rem;
	padding: 0.1rem 0;
}

.pinglun ul li>.pltext .plrenxx>span {
	font-size: 0.2rem;
	color: #aaaaaa;
	float: right
}

.pinglun ul li>.pltext .plxxziliao>a {
	color: #007aff;
	font-size: 0.16rem;
	line-height: 0.3rem;
	padding: 0 0.1rem
}
</style>
	<div class="datulunbo">
		<div class="swiper">
			<div class="device">

				<div class="swiper-container">
					<div class="swiper-wrapper">
						<c:set value="${ fn:split(goods.goodsImage, ',') }" var="imgList" />
						<c:forEach items="${imgList}" var="img" varStatus="status">
							<div class="swiper-slide">
								<img
									src="<%=basePath%>/app/getGoodsPhotoByName?goodsImage=${img}">
							</div>
						</c:forEach>
					</div>
				</div>
				<div class="pagination"></div>
			</div>
			<script src="<%=basePath%>assets/js/idangerous.swiper.min.js"></script>
			<script>
            var mySwiper = new Swiper('.swiper-container',{
                pagination: '.pagination',
                paginationClickable: true,
                spaceBetween: 30,
                centeredSlides: true,
                autoplay: 2500,
                autoplayDisableOnInteraction: false
            })
        </script>
		</div>
	</div>
	<!-- 轮播图部分结束 -->



	<div class="content">
		<div class="shangpinjiage clearFirx">
			<p>${goods.goodsName}</p>
			<div class='clearFirx'>
				<span class="float_r goodsPrice" style='color: red'>￥<i>${goods.goodsPrice}</i></span>
				<span class="float_l goodsSales">销量 <c:if
						test="${goods.goodsSales != null}">${goods.goodsSales}件</c:if> <c:if
						test="${goods.goodsSales == null}">0件</c:if>
				</span>
			</div>
			<!--    		<div class='guige'>规格： -->
			<%--     		<c:if test="${goods.goodsSize != null}">${goods.goodsSize}</c:if> --%>
			<%-- 			<c:if test="${goods.goodsSize == null}"></c:if> --%>
			<!-- 		</div> -->
		</div>
		<div class="shangpinxinxi">
			<div class="shangpinjieshao">
				<h3>商品描述</h3>
				<p>${goods.goodsIntro}</p>
			</div>
			<%--         <c:set value="${ fn:split(goods.goodsImage, ',') }" var="imgList" /> --%>
			<%-- 		<c:forEach items="${imgList}" var="img" varStatus="status"> --%>
			<!-- 			<div class="shangpintupian"> -->
			<%--            		<img src="<%=basePath%>/app/getGoodsPhotoByName?goodsImage=${img}" alt="">  --%>
			<!--         	</div> -->
			<%-- 		</c:forEach> --%>
		</div>
		<div class="pinglun">
			<h3>商品评论</h3>
			<ul>
				<c:forEach var="aboutGoodsOfAppraises"
					items="${aboutGoodsOfAppraises}">
					<li class="clearFirx">
						<div class="float_l img">
							<c:if test="${not empty aboutGoodsOfAppraises.userPhoto}">
								<img
									src="<%=basePath%>app/getGoodsPhotoByName?goodsImage=${aboutGoodsOfAppraises.userPhoto}"
									class="float_l">
							</c:if>
							<c:if test="${empty aboutGoodsOfAppraises.userPhoto}">
								<img src="<%=basePath%>/assets/css/aboutUs/logo.png" alt=""
									class="float_l">
							</c:if>
						</div>
						<div class="pltext float_l">
							<p class="plrenxx">${aboutGoodsOfAppraises.userName}
								<span class="float_r">${fn:substring(aboutGoodsOfAppraises.createDate, 0, 10)}</span>
							</p>
							<p class="plxx">${aboutGoodsOfAppraises.content}</p>
							<p class="plxxziliao clearFirx">
								<%--                 	<span class="float_l">${fn:substring(aboutGoodsOfAppraises.createDate, 0, 10)}</span> --%>
								<!--                <a href="javascript:;" class="float_r huifuanniu" onclick="huifu($(this))">回复</a> -->
							</p>
						</div>
					</li>
				</c:forEach>
			</ul>
		</div>
</body>
</html>